<template>
	<view class="content">
		<view style="position: relative;z-index: 999999;">
			<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>

			<view class="head flex justify-center align-center ">
				<u-search
					placeholder="搜索栋/单元/门牌号/手机号"
					v-model="keyword"
					:show-action="false"
					@change="change"
					@clear="clear"
					@search="search"
					@custom="custom"
				></u-search>
			</view>
			<u-sticky class="">
				<view class="tltle flex align-center justify-between padding-lr-lg margin-bottom-sm">
					<text class="text-df">
						缴费总金额：
						<text class="text-price text-red">0</text>
					</text>
					<text class="text-sm block padding-xs round " style="background: #F7F6F2 " @click="showTime = true">
						{{ time }}
						<text class="cuIcon-unfold margin-left-xs"></text>
					</text>
				</view>
			</u-sticky>
		</view>

		<image
			v-if="!payInfo.length"
			src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/dataIsEmpty.png"
			mode="aspectFill"
			class="emptyIcon "
		></image>
		<block v-for="(item, index) in payInfo" :key="index" class="">
			<view class="info padding flex flex-direction bg-white radius   shadow">
				<view class="flex justify-between padding-tb-sm solid-bottom" @click="downn(index)">
					<text class=" text-cut ">{{ item.name }}</text>
					<text class=" margin-left-xs" v-if="down == index"></text>
					<text class=" margin-left-xs" v-else></text>
				</view>
				<!-- :class="[down == index ? 'animation-scale-up' : '']" -->
				<view>
					<view class="flex justify-between align-center padding-tb-sm solid-bottom">
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>缴费金额:</text>
						</view>
						<text>{{ item.payment_amount }}元</text>
					</view>
					<view class="flex justify-between align-center padding-tb-sm solid-bottom">
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>业主姓名:</text>
						</view>
						<text v-if="item.full_name">{{ item.full_name }}</text>
						<text v-else class="text-orange">暂无业主姓名</text>
					</view>
					<view v-if="down == index" class="flex justify-between align-center padding-tb-sm solid-bottom">
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>联系电话:</text>
						</view>
						<text v-if="item.contact_details">{{ item.contact_details || '' }}</text>
						<text v-else class="text-orange">暂无联系电话</text>
					</view>
					<view v-if="down == index" class="flex justify-between align-center padding-tb-sm solid-bottom">
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>缴费月份:</text>
						</view>
						<text>{{ item.payment_time || '' }}</text>
					</view>
					<view class="flex justify-between align-center padding-tb-sm solid-bottom" >
						<view class="flex align-center">
							<text class="cuIcon-title text-orange"></text>
							<text>交易时间:</text>
						</view>
						<text>{{ item.creation_date || '' }}</text>
					</view>
				</view>
			</view>
		</block>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			time: '',
			keyName: '小区',
			keyword: '',
			showTime: false,
			down: '',
			count: 1,
			payInfo: [],
			initInfo: {},
			yin: false,
			params: {
				year: true,
				month: true,
				day: false,
				hour: false,
				minute: false,
				second: false,
			},
			id: '',
			name: '',
			page: 1,
			limit: 10,
			total: '',
		};
	},
	onLoad(e) {
		this.id = e.id;
		console.log('(new Date().getMonth() + 1) :>> ', (new Date().getMonth() + 1));
		if ((new Date().getMonth() + 1)<=9) {
			console.log('this.time  :>> ', this.time );
			this.time = new Date().getFullYear() + '-' + '0' + (new Date().getMonth() + 1);
		} else {
			console.log('this.time  :>> ', this.time );
			this.time = new Date().getFullYear() + '-' + (new Date().getMonth() + 1);
		}

		var that = this;
		this.getPayInfo(e.id);
		// app.globalData.api.getEEPayment().then(res => {
		// 	that.initInfo = res.resultObj;
		// });
	},
	onReachBottom() {
		this.page++;
		if (this.payInfo.length == this.total) {
			this.$refs.uToast.show({ title: '暂无更多缴费信息~~', type: 'error' });
		} else {
			this.getPayInfo();
		}
	},
	methods: {
		// search(porpertyId,name){
		// 	var that = this
		// 	this.yin = false;
		// 	app.globalData.api.getALLUserPropertyPay(porpertyId).then(res=>{
		// 		that.payInfo = res.resultObj;
		// 		that.keyName = name;
		// 	})
		// },

		change(e) {
			if (!e) {
				this.getPayInfo(this.id, this.time, (this.name = ''));
			}
		},
		clear() {
			this.getPayInfo(this.id, this.time, (this.name = ''));
		},
		search(e) {
			this.getPayInfo(this.id, this.time, (this.name = e));
		},
		custom() {},
		confirm(e) {
			console.log('e: ', e);
			if (new Date().getFullYear() == e.year && e.month > new Date().getMonth() + 1) {
				this.$refs.uToast.show({ title: '选择的月份不能大于本月~~', type: 'error' });
			} else {
				this.time = e.year + '-' + e.month;
				this.getPayInfo(this.id, e.year + '-' + e.month, this.name);
			}
		},
		getPayInfo(id = this.id, payDate = this.time, name = this.name) {
			var that = this;
			app.globalData.api
				.getPropertyPayById(id, {
					page: this.page,
					limit: this.limit,
					name,
					payDate,
				})
				.then(res => {
					//total
					that.payInfo = res.rows;
					that.total = res.total;
				});
		},
		jump(url) {
			uni.navigateTo({
				url,
			});
		},
		countt(count) {
			this.count = count;
			if (count == 1) {
				this.yin = false;
				this.getPayInfo();
				this.keyName = '小区';
			}
			if (count == 2) {
				this.yin = !this.yin;
			}
			if (count == 3) {
				this.showTime = true;
				this.yin = false;
			}
		},
		downn(down) {
			this.down = down;
		},
	},
};
</script>

<style lang="scss" scoped>
.content {
	.red {
		background-color: red;
	}
	.head {
		width: 100vw;
		height: 100rpx;
		background-color: #f8ce39;
		/deep/ .u-search {
			display: flex;
			align-items: center;
			width: 690rpx;
		}
	}
	.styleRed {
		color: #f8ce39;

		font-weight: 600;
		transition: 1s font-weight;
		//font-size: 32rpx;
	}
	.tltle {
		width: 750rpx;
		height: 100rpx;
		background: #ffffff;
	}
	.flg {
		width: 100vw;
		height: 104rpx;
	}
	.info {
		width: 690rpx;
		margin: 0 auto;
		margin-bottom: 25rpx;
	}
}
.xiaoqu {
	width: 100%;
	height: 480rpx;
	padding: 25rpx 25rpx 80rpx;
	background-color: #ffffff;
	overflow: auto;
	overflow-y: scroll;
	z-index: 999990;
}
.details {
	height: 80rpx;
	line-height: 80rpx;
	border-bottom: 1px solid #ebebeb;
	color: #5b5b5b;
}
.yin {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.5);
}
.navss {
	background-color: #f6f6f6;
	z-index: 99999999;
}
</style>
